<div id="tb<?php echo $uniqid;?>" style="padding-top: 20px">
	<el-form :model="form" ref="form" method="post" :rules="formValidateRules" size="small" label-width="120px" @submit.native.prevent label-position="right">
		<el-form-item label="活动名称：" prop="title">
			<el-input v-model="form.title" size="small" style="width: 450px"></el-input>
		</el-form-item>
		<el-form-item label="活动类型：" required>
			<el-select v-model="form.type" size="small" placeholder="请选择活动类型" popper-class="zindex_popper" popper-append-to-body="false" style="width: 450px">
				<el-option label="限时秒杀" value="seckill"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="活动时间：" prop="startend_time">
			<el-date-picker
				v-model="form.startend_time"
				type="datetimerange"
				:picker-options="pickerOptions"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				:default-time="['00:00:00', '23:59:59']"
				format="yyyy年MM月dd日 HH时mm分ss秒"
				value-format="yyyy-MM-dd HH:mm:ss"
				align="right"
				size="small"
				style="width: 500px"
				popper-class="zindex_popper">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="每人限购件数：">
			<el-input-number size="small" v-model="form.rules.limit_buy" placeholder="0表示不限制购买件数" controls-position="right" :min="0" style="width: 450px">
				<template slot="append">件</template>
			</el-input-number>
		</el-form-item>
		<el-form-item label="订单关闭时间：">
			<el-input-number size="small" v-model="form.rules.order_auto_close" placeholder="未支付订单，订单将自动关闭并退出活动" controls-position="right" :min="0" style="width: 450px">
				<template slot="append">分钟</template>
			</el-input-number>
		</el-form-item>
		<el-form-item label="活动下架时间：">
			<el-input-number size="small" v-model="form.rules.activity_auto_close" placeholder="活动结束后，将自动进入历史活动" controls-position="right" :min="0" style="width: 450px">
				<template slot="append">分钟</template>
			</el-input-number>
		</el-form-item>
		<el-form-item label="活动说明：">
			<el-input type="text" placeholder="请选择活动说明" v-model="form.richtext_title" class="rich_text" size="small" style="width: 450px">
				<el-input type="hidden" v-model="form.richtext_id"></el-input>
			</el-input>
			<el-button type="primary" @click="richtextSelect" size="small" style="width: 110px;">选择活动说明</el-button>
		</el-form-item>
		<el-form-item label="活动商品：" prop="goods_ids">
			<el-input type="hidden" v-model="form.goods_ids" style="display: none;"></el-input>
			<el-button type="primary" @click="goodsSelect" size="small" style="width: 110px;">选择商品</el-button>
			<template>
				<el-table :data="goodsInfoList" border empty-text="请选择商品" style="width: 100%; margin-top: 10px;" stripe="true" header-cell-style="text-align:center; padding: 5px 0;" cell-style="padding: 5px 0;">
					<el-table-column label="商品信息" width="380">
						<template slot-scope="scope">
							<div style="display: flex">
								<div style="width: 32px; display: flex; align-items: center;">
									<img style="width: 30px; height: 30px; border-radius: 5px; border:1px solid #eee; overflow: hidden;" :src="scope.row.image">
								</div>
								<div style="width: calc(100% - 42px); text-align: left;">
									{{scope.row.title}}
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" :type="scope.row.skuInfo.length?'success':'primary'" @click="goodsSkuSet(scope.$index, scope.row)">{{scope.row.skuInfo.length?'修改规格':'设置规格'}}</el-button>
							<el-button size="mini" type="danger" @click="goodsRemove(scope.$index, scope.row)">移除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</el-form-item>
	</el-form>
	<div id="activityadddlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
</div>

<script>
	var activityAddVM = new Vue({
		el: '#tb<?php echo $uniqid;?>',
		data: {
			activityId: '<?php echo addslashes($activity_id);?>',
			form:{
				title:'',
				type:'seckill',
				richtext_id: 0,
				richtext_title:'',
				startend_time:[],
				rules:{
					'activity_auto_close':'',
					'limit_buy':'',
					'order_auto_close':''
				},
				goods_ids:[],
			},
			goodsInfoList:[],
			delGoodsIds:[],
			formValidateRules:{
				title: [
					{ required: true, message: '请输入活动标题'},
					{ min: 3, message: '活动标题长度必须大于 3 个字符', trigger: 'blur' }
				],
				startend_time: [
					{type: 'array', required: true, message: '请选择活动起止时间！', trigger: ['blur','change']},
				],
				goods_ids:[
					{type: 'array', required: true, message: '请选择活动商品！', trigger: 'change'},
				],
			},
			pickerOptions: {
				shortcuts: [{
					text: '未来7天',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来30天',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
					}
				}, {
					text: '未来90天',
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
					}
				}]
			},
		},
		created: function () {
			if(this.activityId && this.activityId != '0'){
				let that = this;
				$.post('/admin/activity/edit', {id:this.activityId,mode:'info'}, function (response) {
					if (response.ret === 0) {
						that.form = response.data.activity;
						that.goodsInfoList = response.data.goodsList;
						if(!Array.isArray(response.data.activity.goods_ids)){
							that.form.goods_ids =  Object.values(response.data.activity.goods_ids);
						}
						if(that.form.goods_ids.length){
							for (let i = 0; i < that.form.goods_ids.length; i++){
								that.form.goods_ids[i] = parseInt(that.form.goods_ids[i]);
							}
						}
					} else {
						$.messager.alert('提示', response.msg, 'warning');
						$("#activitydlg").dialog('close');
					}
				}, 'json');
			}
		},
		filters: {
			formatDate(nS){
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			updateVMData() {
				this.$forceUpdate();
			},
			init: function () {

			},
			richtextSelect:function (){
				$("#activityadddlg").dialog({
					title: '选择活动说明',
					closed: false,
					width: 800,
					height:600,
					cache: false,
					href: '/admin/activity/getrichtext',
					modal: true,
					buttons:[]
				});
			},
			goodsSelect:function (){
				$("#activityadddlg").dialog({
					title: '选择商品',
					closed: false,
					width: 800,
					height:638,
					cache: false,
					href: '/admin/activity/getgoodslist',
					modal: true,
					buttons:[{
						text:'确定',
						id:'activityAddGoodsSelectSubmit',
						iconCls:'icon-ok',
					},{
						text:'关闭',
						iconCls:'icon-no',
						handler:function(){
							$("#activityadddlg").dialog('close');
						}
					}]
				});
			},
			activityAddSubmit:function (){
				let that = this;
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let postData = that.form;
						postData.skuInfoList = [];
						let skuInfo=true;
						let no_skuGoods_title = '';
						for(let i = 0; i < postData.goods_ids.length; i++){
							if(that.goodsInfoList[i].skuInfo.length === 0){
								no_skuGoods_title = that.goodsInfoList[i].title;
								skuInfo = false;
								break;
							}else{
								$.merge(postData.skuInfoList,that.goodsInfoList[i].skuInfo);
							}
						}
						if(!skuInfo){
							$.messager.alert('提示', '没有设置商品：【'+no_skuGoods_title + '】的活动规格！','warning');
							return false;
						}else{
							postData.start_time = postData.startend_time[0];
							postData.end_time = postData.startend_time[1];
							delete postData.startend_time;
							let postMode = 'add';
							if(that.activityId && that.activityId != '0'){
								postMode = 'edit';
								postData.id = that.activityId;
								postData.mode = 'submit';
								postData.delGoodsIds = that.delGoodsIds;
							}
							$.post('/admin/activity/'+postMode, postData, function (data) {
								if (data.ret === 0) {
									$.messager.show({
										title: '提示',
										msg: data.msg,
										timeout: 3000,
										showType: 'slide'
									});
									$("#activitydlg").dialog('close');
									activityReload();
								} else {
									$.messager.alert('提示', data.msg, 'warning');
								}
							}, 'json');

						}
					} else {
						return false;
					}
				});
			},
			goodsSkuSet: function (index, rowData) {
				$("#activityadddlg").dialog({
					title: '设置商品： '+ rowData.title + ' 参与活动的规格',
					closed: false,
					width: 800,
					height:638,
					cache: false,
					href: '/admin/activity/getgoodsskulist?id='+activityAddVM.activityId+'&goods_id='+rowData.id,
					modal: true,
					buttons:[{
						text:'确定',
						id:'activityAddGoodsSkuSubmit',
						iconCls:'icon-ok',
					},{
						text:'关闭',
						iconCls:'icon-no',
						handler:function(){
							$("#activityadddlg").dialog('close');
							delete activitySkuListEditVm.skuData;
							delete activitySkuListEditVm.sku_info;
						}
					}]
				});
			},
			goodsRemove: function (index, rowData) {
				if(this.form.goods_ids.length > 1){
					if(index > -1 && rowData.id === this.form.goods_ids[index]){
						if(this.goodsInfoList[index].skuInfo.length){
							for(let i = 0; i < this.goodsInfoList[index].skuInfo.length; i++){
								if(this.goodsInfoList[index].skuInfo[i].is_in === 1 && this.goodsInfoList[index].skuInfo[i].id > 0){
									this.delGoodsIds.push(this.form.goods_ids[index]);
									break;
								}
							}
						}
						this.goodsInfoList.splice(index, 1);
						this.form.goods_ids.splice(index, 1);
					}
				}else{
					$.messager.alert('提示', '最少需要保留1个活动商品！','warning');
				}
			},
		}
	});
	$('#activityaddsubmit').click(function(){
		activityAddVM.activityAddSubmit();
	})
</script>
<style>
	.zindex_popper{
		z-index: 20000 !important;
	}
</style>